<template>
  <div id="homemenus">
    <!-- 编辑的弹框 -->
    <el-dialog title="编辑菜单" :visible.sync="editvisible" width="500px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="菜单名称">
          <el-input v-model="editMenusName"></el-input>
        </el-form-item>
               <el-form-item label="路由">
          <el-input v-model="editMenusRouter"></el-input>
        </el-form-item>
        <el-form-item label="图标">
            <el-select v-model="editMenusIcon" placeholder>
            <el-option
              v-for="(icon,index) in icons"
              :key="'icon'+index"
              :label="icon"
              :value="icon"
            >
            <i :class="icon">{{icon}}</i>
            </el-option>
          </el-select>
          <i :class="editMenusIcon"></i>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="editMenusStatus" label="1">显示</el-radio>
          <el-radio v-model="editMenusStatus" label="0">不显示</el-radio>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="editSave()">保存</el-button>
          <el-button @click="editvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 创建菜单的弹框 -->
    <el-dialog title="创建新菜单" :visible.sync="rootvisible" width="500px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="菜单名称">
          <el-input v-model="rootMenusName"></el-input>
        </el-form-item>
        <el-form-item label="路由">
          <el-input v-model="rootMenusRouter"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-select v-model="rootMenusIcon" placeholder>
            <el-option
              v-for="(icon,index) in icons"
              :key="'icon'+index"
              :label="icon"
              :value="icon"
            >
            <i :class="icon">{{icon}}</i>
            </el-option>
          </el-select>
          <i :class="rootMenusIcon"></i>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="rootMenusStatus" label="1">显示</el-radio>
          <el-radio v-model="rootMenusStatus" label="0">不显示</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rootSave()">创建</el-button>
          <el-button @click="rootvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 头部 -->
    <el-card :body-style="{ padding: '20px' }" shadow="never" v-loading="loading">
      <div slot="header">菜单管理
        <el-button type="primary" size="mini" icon="el-icon-plus" @click.stop="addRoot()">添加菜单</el-button>
      </div>
      <el-tree :data="menus" :props="{label:'menu_name'}">
        <div
          slot-scope="{node,data}"
          @mouseover="showOpt=data.id"
          @mouseout="showOpt=false"
          id="menusbox"
        >
          <div id="menustitle">{{data.menu_name}}</div>
          <div class="box" v-show="showOpt==data.id">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click.stop="edit(data)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.stop="del(data.id)">删除</el-button>
            <el-switch @change="changeStatus(data)" v-model="data.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ccc"></el-switch>
            <el-button
              type="primary"
              icon="el-icon-arrow-up"
              circle
              size="mini"
              v-show="node.previousSibling"
              @click.stop="sort(data.id,'up')"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-arrow-down"
              circle
              size="mini"
              v-show="node.nextSibling"
              @click.stop="sort(data.id,'down')"
            ></el-button>
          </div>
        </div>
      </el-tree>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      icons: [
        "el-icon-edit",
        "el-icon-phone-outline",
        "el-icon-date",
        "el-icon-document",
        "el-icon-service",
        "el-icon-tickets",
        "el-icon-sold-out"
      ],
      showOpt: "",
      rootMenusName: "",
      rootMenusIcon: "",
      rootMenusStatus: "1",
      rootMenusRouter: "/",
      editMenusName: "",
      editMenusIcon: "",
      editMenusRouter: "",
      editMenusStatus:"",
      menus: [],
      rootvisible: false,
      editvisible: false,
      loading: false,
      parentid: "",
      editid: "",
     
    };
  },
  created() {
    this.getmenus();
  },
  methods: {
    //   获取大纲列表
    getmenus() {
      this.loading = true;
      this.axios.get("/menus").then(ret => {
        this.loading = false;
        let { data } = ret.data;
        this.menus = data;
        console.log(this.menus);
      });
    },
    addRoot() {
      this.rootvisible = true;
    },
    // 保存根节点
    rootSave() {
      this.axios
        .post("/menus/add", {
          menu_name: this.rootMenusName,
          parent_id: 0,
          status: this.rootMenusStatus,
          icon: this.rootMenusIcon,
          router: this.rootMenusRouter
        })
        .then(() => {
          this.getmenus();
          this.rootvisible = false;
          this.$root.$emit("updataMenus");
          this.$message.success("添加成功");
        });
    },

    // 删除节点
    del(id) {
      this.$confirm("删除", "删除", "提示")
        .then(() => {
          this.axios
            .delete(`/menus/del/${id}`)
            .then(() => {
              this.getmenus();
              this.$root.$emit("updataMenus");
            })
            .catch(() => {
              this.$message.error("请删除子菜单");
            });
        })
        .catch(() => {});
    },
    // 编辑节点
    edit(data) {
      (this.editvisible = true), (this.editid = data.id);
      this.editMenusName = data.menu_name;
      this.editMenusIcon =data.icon;
      this.editMenusRouter=data.router;
      this.editMenusStatus=data.status
    },
    // 编辑完成后保存
    editSave() {
      this.axios
        .put(`/menus/edit/${this.editid}`, {
          menu_name: this.editMenusName,
          router:this.editMenusRouter,
          icon:this.editMenusIcon,
          status:this.editMenusStatus
        })
        .then(() => {
          this.getmenus(), (this.editvisible = false);
          this.$root.$emit("updataMenus");
        })
        .catch(() => {});
    },
    // 排序
    sort(id, dir) {
      this.axios.put(`/menus/sort/${id}/${dir}`).then(() => {
        this.getmenus();
         this.$root.$emit("updataMenus");
      });
    },
    changeStatus(data){
         this.axios
        .put(`/menus/edit/${data.id}`, {
          status: data.status
        })
        .then(() => {
          this.editvisible = false;
          this.$root.$emit("updataMenus");
        })
        .catch(() => {});
       
    }
  }
};
</script>

<style>
.el-tree-node__content {
  border: 1px solid #eee;
  margin-top: 10px;
  padding: 10px 10px;
}
#menustitle {
  height: 30px;
  width: 100px;
  line-height: 30px;
}
#menusbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* .el-tree-node__content:hover .box {
  visibility: visible;
} */
/* .box {
  display: inline-block;
  position: absolute;
  left: 500px;
  top: 10px;
  visibility: hidden;
  
} */
.box .el-button {
  text-align: left;
}
</style>
